<template>
  <div class="tongji">
    <div class="tou">
      <el-button type="primary" @click="handleput('')">
        新增
        <i class="el-icon-plus el-icon--right"></i>
      </el-button>
      <el-button type="primary" @click="daochus">
        导出
        <i class="el-icon-plus el-icon--right"></i>
      </el-button>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :height="tableHeight"
        :data="tableData"
        tooltip-effect="dark"
      >
        <el-table-column type="index" label="序号">
          <template scope="scope">
            <span>{{ (currentPage - 1) * 15 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="review_name" label="用户名"></el-table-column>
        <el-table-column prop="name" label="评审专家姓名"></el-table-column>
        <el-table-column prop="work_unit" label="工作单位"></el-table-column>
        <el-table-column prop="job" label="职务职称"></el-table-column>
        <el-table-column prop="review_mobile" label="手机号"></el-table-column>
        <el-table-column prop="review_mobile" label="填写状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.status == 1 ? "填写" : "未填写" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="review_mobile" label="提交状态">
          <template slot-scope="scope">
            <div v-if="scope.row.state == 1">提交</div>
            <div v-else-if="scope.row.state == 2">驳回</div>
            <div v-else>未提交</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="group_name" label="权限组"></el-table-column> -->
        <el-table-column label="操作" width="500px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="fenpei(scope.row)"
              >分配奖项</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="del(scope.row)"
              >删除</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="bianji(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="dels(scope.row)"
              >奖项列表</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="review_state(scope.row)"
              >驳回</el-button
            >

            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="xiangqing(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalPage"
        @current-change="handleSizeChange"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="Visible" width="30%" center>
      <el-form
        :model="ruleForm"
        :rules="rules1"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="review_name">
          <el-input v-model="ruleForm.review_name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="review_mobile">
          <el-input v-model="ruleForm.review_mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码" :prop="ruleForm.id ? '' : 'password'">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >完成</el-button
          >
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div class="xiangqings">
        <div>
          <div>姓名</div>
          <div>{{ obj.name }}</div>
        </div>
        <div>
          <div>身份证</div>
          <div>{{ obj.id_card }}</div>
        </div>
        <div>
          <div>电话号</div>
          <div>{{ obj.review_mobile }}</div>
        </div>
        <div>
          <div>性别</div>
          <div>{{ obj.sex }}</div>
        </div>
        <div>
          <div>邮箱</div>
          <div>{{ obj.email }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  create_review,
  review_list,
  review_del,
  review_details,
  review_state,
} from "../axios/api";
var isMobileNumber = (rule, value, callback) => {
  if (!value) {
    return new Error("请输入电话号码");
  } else {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    const isPhone = reg.test(value);
    value = Number(value); //转换为数字
    if (typeof value === "number" && !isNaN(value)) {
      //判断是否为数字
      value = value.toString(); //转换成字符串
      if (value.length < 0 || value.length > 12 || !isPhone) {
        //判断是否为11位手机号
        callback(new Error("手机号码格式如:138xxxx8754"));
      } else {
        callback();
      }
    } else {
      callback(new Error("请输入电话号码"));
    }
  }
};
export default {
  data() {
    return {
      obj: {},
      tableHeight: "400px",
      centerDialogVisible: false,
      page: 0,
      totalPage: 0,
      currentPage: 1,
      pageSize: 0,
      tableData: [],
      Visible: false,
      ruleForm: {
        password: "",
        id: "",
        review_mobile: "",
        review_name: "",

        token: sessionStorage.getItem("Token1"),
      },
      rules1: {
        review_name: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],

        review_mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: isMobileNumber, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.review_list();
  },
  components: {},
  beforeDestroy() {
    // 由于window.onresize是全局事件，在其他页面改变界面时也会执行，这样可能会出现问题，需要在离开这个界面时注销window.onresize事件
    window.onresize = null;
  },
  mounted() {
    this.$nextTick(() => {
      this.setTableHeight();
      // 监听窗口大小变化
      window.onresize = () => {
        this.setTableHeight();
      };
    });
  },
  methods: {
    setTableHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;
      console.log("this.tableHeight");
      console.log(this.tableHeight);
    },
    review_state(e) {
      console.log(e);
      let params = {
        token: sessionStorage.getItem("Token1"),
        id: e.id,
        state: 2,
      };
      review_state(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "成功",
            type: "success",
          });

          this.review_list();
        } else {
          this.$message.error({
            message: res.data.msg,
          });
        }
      });
    },
    daochus() {
      window.location.href =
        "http://" +
        window.location.host +
        "/common/review_export?token=" +
        sessionStorage.getItem("Token1") +
        "";
    },
    dels(e) {
      console.log(e);
      localStorage.setItem("ids", e.id);
      this.$router.push({ path: "/dels", query: { id: e.id } });
    },
    fenpei(e) {
      console.log(e);
      localStorage.setItem("ids", e.id);
      this.$router.push({ path: "/fenpei", query: { id: e.id } });
    },
    xiangqing(e) {
      console.log(e);
      let params = {
        token: sessionStorage.getItem("Token1"),
        id: e.id,
      };
      review_details(params).then((res) => {
        console.log(res);
        this.obj = res.data.data;
        this.centerDialogVisible = true;
      });
    },
    bianji(e) {
      console.log(e);
      this.ruleForm = {
        password: "",
        id: e.id + "",
        review_mobile: e.review_mobile,
        review_name: e.review_name,
        token: sessionStorage.getItem("Token1"),
      };
      this.Visible = true;
    },
    del(e) {
      let id = [];
      id.push(e.id);
      let params = {
        token: sessionStorage.getItem("Token1"),
        id,
      };
      review_del(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "成功",
            type: "success",
          });

          this.review_list();
        } else {
          this.$message({
            message: res.data.msg,
          });
        }
      });
    },
    review_list() {
      let params = {
        token: sessionStorage.getItem("Token1"),
        page: this.currentPage,
      };
      review_list(params).then((res) => {
        console.log(res.data.code);
        if (res.data.code == 200) {
          this.totalPage = res.data.data.totalPage;
          this.tableData = res.data.data.data;
        } else {
          console.log(123);
          this.tableData = [];
        }
      });
    },
    handleput() {
      this.ruleForm = {
        password: "",
        id: "",
        review_mobile: "",
        review_name: "",
        token: sessionStorage.getItem("Token1"),
      };
      this.Visible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = this.ruleForm;
          // this.ruleForm.token = sessionStorage.getItem("Token1");
          // if (this.ruleForm.id) {
          //   this.ruleForm.id = this.ruleForm.id + "";
          // }
          create_review(params).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({
                message: "成功",
                type: "success",
              });
              this.ruleForm = {};
              this.Visible = false;
              this.review_list();
            } else {
              this.$message({
                message: res.data.msg,
              });
            }
          });
        } else {
          this.ruleForm = {};
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = val;
      this.review_list();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm = {};
      this.Visible = false;
    },
  },
};
</script>

<style scoped>
.tongji {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
.tou {
  padding: 20px;
}
.table {
  /* height: 80%; */
  /* overflow-y: auto; */
  box-sizing: border-box;
  margin: 0 20px;
}
.fenye {
  width: 100%;
  display: flex;
  justify-content: center;
}
.xiangqings > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 18px;
}
</style>